<template>
  <div class='shopcar-container'>
    <div class="mui-card">
      <div class="mui-card-content">
        <div v-for='item in goodslist' :key='item.id' class="mui-card-content-inner">
          <mt-switch></mt-switch>
          <img :src="item.thumb_path" alt="">
          <div>
            <h3>{{ item.title }}</h3>
            <p>
              <span class='price'>￥{{item.sell_price}}</span>
              <numbox></numbox>
              <a href="#">删除</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import numbox from '../subcomponents/shopcar_numbox.vue'
import {Toast} from 'mint-ui'
export default {
  data(){
    return {
      goodslist:[]
    }
  },
  created(){
    this.getGoodsList()
  },
  methods:{
    getGoodsList(){
      var idArr = []
      this.$store.state.car.forEach((item,i) => {
        idArr[i] = item.id
      })
      if(idArr.length <=0){
        return ;
      }
      // if(idArr.length > 1){
      //   ids = idArr.join(',')
      // }else{
      //   ids = idArr[0]
      // }
      console.log(idArr.length)
      this.$http.get('goods/getshopcarlist/' + idArr[0]).then(result => {
        if(result.body.status === 0){
          console.log(result.body.message)
          this.goodslist = result.body.message
          console.log(result.body.message);
        }else{
          Toast('获取数据失败!')
        }
      })
    }
  },
  components:{
    numbox
  }
}
</script>

<style lang="scss" scoped>
.shopcar-container{
  background: #eee;
  overflow: hidden;
  .mui-card-content-inner{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    img{
      width:60px;
      height:60px;
    }
    h3{
      font-size:18px;
    }
    p{
      font-size:16px;
      .price{
        color:red;
      }
    }
  }
}
</style>
